<% include header_index.html %>

	<style>
		body {
			background: #f3f3f3;
			width: 100vw;
			overflow-x: hidden;
		}

		.index_logo {
			width: 35px;
			display: block;
			margin: 0 auto;
			padding-top: 12px;
		}

		.header_top {
			width: 100vw;
			position: absolute;
			top: 0;
			z-index: 2;
		}

		.header_top img {
			width: 20px;
			margin: 12px 20px;
		}

		.swiper-container img {
			width: 100vw;
		}

		.swiper-slide {
			width: 100vw;
			height: 143px;
		}

		.swiper-slide img {
			width: 100vw;
			height: 215px;
		}
		/*.swiper_bottom img{*/
		/*width: 100vw;*/
		/*margin-bottom: 0;*/
		/*padding-bottom: 0;*/
		/*border-bottom: 0;*/
		/*}*/
		/*.swiper_bottom{*/
		/*position: relative;*/
		/*z-index: 2;*/
		/*top: 7px;*/
		/*margin-bottom: 0;*/
		/*padding-bottom: 0;*/
		/*border-bottom: 0;*/
		/*}*/

		.categroy_div {
			background: white;
			margin-left: 15px;
			height: auto;
			width: 395px;
		}

		.cagegroy {
			width: 50px;
			background: white;
			float: left;
			margin-right: 24px;
			margin-bottom: 13px;
		}

		.cagegroy img {
			width: 40px;
			float: left;
			margin: 0 5px;
		}

		.cagegroy p {
			width: 50px;
			float: left;
			font-size: 10px;
			color: #535353;
		}

		.categroy_div_big {
			width: 100vw;
			float: left;
			padding-top: 20px;
			background: white;
			margin-top: 0;
			border-top: 0;
		}

		.coupon_div {
			width: 100vw;
			height: 40px;
			float: left;
			background: white;
			margin-top: 10px;
			overflow: hidden;
		}

		.add_img {
			width: 100vw;
			float: left;
			height: 100px;
			margin-bottom: 11px;
		}

		.zxrd_img {
			margin-top: 5px;
			height: 30px;
			margin-left: 20px;
			float: left;
		}

		.zxrd_title {
			color: #454545;
			font-size: 13px;
			float: left;
			margin-left: 34px;
			line-height: 40px;
			width: 200px;
		}

		.flash_sale {
			margin-top: 10px;
			height: 210px;
			width: 100vw;
			float: left;
			overflow: hidden;
		}

		.flash_sale_header {
			width: 100vw;
			height: 40px;
			background: white;
		}

		.flash_sale_ico {
			width: 20px;
			height: 20px;
			margin-top: 10px;
			margin-left: 20px;
			float: left;
		}

		.flash_sale_title {
			margin-right: 20px;
			margin-left: 20px;
			line-height: 40px;
			font-size: 18px;
			color: #fe9b0c;
			float: left;
		}



		.inner {
			border-radius: 6px;
			width: 100px;
			height: 149px;
			background: white;
			margin-top: 10px;
			float: left;
			text-align: left;
			margin-right: 10px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}

		.container {
			margin-left: 20px;
			height: 170px;
		}

		.display {
			background: white;
			width: 100vw;
			overflow: scroll;
		}

		::-webkit-scrollbar {
			/*隐藏滚轮*/
			display: none;
		}

		.goods_img {
			width: 100px;
			height: 100px;
		}

		.goods_sale_price {
			font-size: 15px;
			color: #fe9b0c;
			width: 95px;
			text-align: left;
			margin: 0 auto;
		}

		.goods_price {
			font-size: 12px;
			text-decoration: line-through;
			color: #454545;
			width: 95px;
			text-align: left;
			margin: 0 auto;
		}

		.ad_div1 img {
			width: 100vw;
			height: 120px;
		}

		.ad_div2 {
			background: #EFEFF4;
			width: 376px;
			height: 201px;
		}

		.ad_div2 img {
			float: left;
			width: 187px;
			height: 100px;
			margin-bottom: 1px;
			margin-right: 1px;
		}

		.ad_div3 {
			width: 100vw;
			height: 222px;
		}

		.ad_div3 img {
			border-radius: 24px;
			margin-top: 11px;
			margin-left: 20px;
			width: 335px;
			height: 201px;
		}

		.categroy2_div {
			height: 640px;
			width: 100vw;
			background: white;
			border-radius: 12px 12px 0 0;
			overflow: hidden;
		}

		.weui-grid__label {
			font-size: 15px;
			color: #454545;
			line-height: 41px;
		}

		.weui-grid__icon {
			width: 88px;
			height: 88px;
		}

		.weui-grid:after {
			border-bottom: none;
		}

		.weui-grids:before {
			border-top: none;
		}

		.weui-grid:before {
			border-right: none;
		}

		.weui-grid {
			width: 107px;
			height: 137px;
			padding: 0;
			margin: 10px 9px 0 9px;
			border-radius: 12px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
		}

		.categroy2_header {
			height: 40px;
			width: 100vw;
			border-bottom: 1px solid #EFEFF4;
		}

		.categroy2_header_ico {
			background: url("./images/default_wap/categroy.png");
			width: 20px;
			height: 20px;
			margin: 10px 20px 0 20px;
			background-size: 20px 20px;
			float: left;
		}

		.categroy2_header_lable {
			float: left;
			font-size: 18px;
			color: #febc09;
			line-height: 40px;
		}

		.ad_div4 {
			width: 100vw;
			height: 120px;
		}

		.ad_div4 img {
			width: 100vw;
			height: 120px;
		}
		/*瀑布流*/

		.left {
			width: 172px;
			float: left;
			margin-right: 10px;
		}

		.right {
			width: 172px;
			float: right;
		}

		.left div,
		.right div {
			margin-top: 10px;
		}
		/*瀑布流*/

		.swiper-container {
			width: 100vw;
			height: 215px;
		}

		.swiper-slide {
			width: 100vw;
		}

		.swiper-wrapper {
			width: 100vw;
		}

		.countdown {
			width: 100%;
			color: #000;
			line-height: 20px;
			font-size: 14px;
			padding-top: 10px;
		}

		.countdown span {
			background: linear-gradient(to right, #fe9b0c, #ff8000);
			color: #fff;
			border-radius: 5px;
			padding: 3px;
		}
	</style>
	<div class="big_div">


		<top :opcity='scrolled'></top>


		<!--头部-->
		<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="flash in flashs">
					<a v-bind:href="flash.url">
						<img src="images/default_wap/load.png" v-bind:data-src="config.img_url+flash.pic" alt="">
					</a>
				</div>
				<!--<div class="swiper-slide"><img src="images/default_wap/1.png" alt=""></div>-->
				<!--<div class="swiper-slide"><img src="images/default_wap/2.png" alt=""></div>-->
				<!--<div class="swiper-slide"><img src="images/default_wap/3.png" alt=""></div>-->
			</div>
		</div>

		<!--轮播-->

		<div class="categroy_div_big">
			<div class="categroy_div">
				<div class="cagegroy">
					<a href="./category?cat=1">
						<img src="images/default_wap/categroy01.png" alt="">
						<p>{{lang._001}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=2">
						<img src="images/default_wap/categroy02.png" alt="">
						<p>{{lang._002}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=3">
						<img src="images/default_wap/categroy03.png" alt="">
						<p>{{lang._003}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=4">
						<img src="images/default_wap/categroy04.png" alt="">
						<p>{{lang._004}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=5">
						<img src="images/default_wap/categroy05.png" alt="">
						<p>{{lang._005}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=6">
						<img src="images/default_wap/categroy06.png" alt="">
						<p>{{lang._006}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=7">
						<img src="images/default_wap/categroy07.png" alt="">
						<p>{{lang._007}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=8">
						<img src="images/default_wap/categroy08.png" alt="">
						<p>{{lang._010}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=9">
						<img src="images/default_wap/categroy09.png" alt="">
						<p>{{lang._011}}</p>
					</a>
				</div>
				<div class="cagegroy">
					<a href="./category?cat=0">
						<img src="images/default_wap/categroy10.png" alt="">
						<p>{{lang._012}}</p>
					</a>
				</div>
			</div>
		</div>
		<!--分类-->
		<!-- <div class="coupon_div">
			<a href="news">
				<img class="zxrd_img" src="images/default_wap/zxrd.png" alt="">
			</a>
			<p class="zxrd_title">真皮沙发 VS 布艺沙发</p>
		</div> -->
		<!--咨询热点-->

		<div class="flash_sale">
			<div class="flash_sale_header">
				<img class="flash_sale_ico" src="images/default_wap/flash_sale_ico.png" alt="">
				<p class="flash_sale_title">{{lang._013}}</p>
				<div class="page-bd-15">
					<div class="countdown"></div>
				</div>
			</div>
			<div class="display">
				<div class="container" v-bind:style="'width:'+goods_num+'px;'">
					<div class="inner" v-for="flash_sale in flash_sales">
						<a v-bind:href="'./union/product?uid='+flash_sale.uid+'&setp=2'">
							<img class="goods_img" v-bind:data-src="config.union_img_url+flash_sale.goods_file1" src="images/default_wap/load.png" alt="">
							<p class="goods_sale_price sl1">₱ {{flash_sale.goods_sale_price}}</p>
							<p class="goods_price sl1">₱ {{flash_sale.price}}</p>
						</a>
					</div>

				</div>
			</div>
		</div>
		<!--限时秒杀-->


		<!-- 中间的两个广告，组件化 -->
		<ad v-for="ad in ad2s" :val='ad' :imgurl="config.img_url">

		</ad>


		<div class="ppl">
			<div class="left" id="left">
				<product v-for="product in left_product" :productname="product.goods_name" :price="product.goods_price" :url="'./union/product?setp=1&uid='+product.goods_id"
				    :img="config.img_url+product.goods_pic">

				</product>
			</div>
			<div class="right" id="right">



				<div style="width: 172px;">
					<a :href="right_top_ad_url">
						<img class="right_top_ad" src="images/default_wap/load.png" :data-src="right_top_ad_img" alt="">
					</a>
				</div>


				<product v-for="product in right_product" :productname="product.goods_name" :price="product.goods_price" :url="'./union/product?setp=1&uid='+product.goods_id"
				    :img="config.img_url+product.goods_pic">
				</product>
			</div>
		</div>
		<!--瀑布流-->

		<% include bottom_div.html %>

	</div>

	<script src="dist/index.bundle.js"></script>
	<script>
		Vue.use(bundle);
	</script>
	<script>
		var t = 53709; //秒数
		function showtime() {
			var d = parseInt(t / 3600 / 24);
			if (d < 10) {
				d = "0" + d;
			}
			var h = parseInt((t % (3600 * 24)) / 3600);
			if (h < 10) {
				h = "0" + h;
			}
			var m = parseInt((t % (3600 * 24)) % 3600 / 60);
			if (m < 10) {
				m = "0" + m;
			}
			var s = parseInt((t % (3600 * 24)) % 60);
			if (s < 10) {
				s = "0" + s;
			}
			var a = (d == "00") ? "" : '';
			var b = (h == "00") ? "" : '<span>' + h + '</span> :';
			var c = (m == "00") ? "" : '<span>' + m + '</span> :';
			var d = (s == "00") ? '<span>' + s + '</span>' : '<span>' + s + '</span>';
			$('.countdown').html(a + b + c + d);
			t = t - 1;
		}
		showtime();
		setInterval("showtime()", 1000);
	</script>


	<% include footer.html %>